<template>
  <div class="mySet">
    <div class="headerBox">
      <van-nav-bar
      title="修改支付密码"
      left-arrow
      @click-left="onClickLeft"
    ></van-nav-bar>
    </div>
    
    <div v-if="type">
      <div>
        <div class="samll_box xiu">
          <div class="name" @click="showPicker = true">
            <p class="selectRow">{{walletSelect.walletName}}</p>
            <van-popup v-model="showPicker" position="bottom" get-container="body">
              <van-picker
                show-toolbar
                :columns="walletList"
                @cancel="showPicker = false"
                @confirm="onConfirm"
                value-key="walletName"
              />
            </van-popup>
            <!-- <span class="sele"></span> -->
            <p class="tx">*您正在修改当前钱包支付密码</p>
          </div>
        </div>
        <div class="samll_box">
          <p @click="clearPwd">原支付密码</p>
          <input type="text" v-model="ruleForm.oldPwd" placeholder="请输入密码" placeholder-style="color:#D6D5D5" class="input_box">
        </div>
        <div class="samll_box">
          <p>新支付密码<span style="color:#F30F0F;font-size:.24rem;margin-left:.12rem">*8-16位字符</span></p>
          <input type="text" v-model="ruleForm.newPwd" placeholder="请输入密码" placeholder-style="color:#D6D5D5" class="input_box">
        </div>
        <div class="samll_box">
          <p>重复支付密码</p>
          <input type="text" v-model="ruleForm.confirmPwd" placeholder="请输入密码" placeholder-style="color:#D6D5D5" class="input_box">
        </div>
      </div>
      <div class="footer" v-show="isOriginHei">
        <span @click="submit">提交</span>
      </div>
    </div>
    <div class="noWallet" v-else>
      <img src="@/assets/img/wallet/img_qianbao2@2x.png" alt="">
      <p>你还没有钱包哟</p>
    </div>
  </div>
</template>
<script>
import {Encrypt,Decrypt} from '@/utils/AES.utils.js'
import positionBtn from "../positionBtn.js";
export default {
  mixins: [positionBtn],
  data() {
    return {
      ruleForm:{
        oldPwd:'',
        newPwd:'',
        confirmPwd:''
      },
      type: false,
      walletSelect:{},
      showPicker:false,
      walletList:[],
      oldPwd:'',
      userId:'',
      walletBox:null,
      i:0
    };
  },
  created() {
    this.userId=JSON.parse(localStorage.getItem('userInfor')).userId
    this.walletBox= JSON.parse(localStorage.getItem('wallet'))
    // this.getUserWalletList()
  },
  methods: {
    async getUserWalletList(){
        let res = await this.$http.getUserWalletList();
        if (res) {
          this.walletList =res.data.map(x=>{
            x.text = x.walletName
            x.value = x.walletAddr
            if(x.walletStatus) {
              this.ruleForm.from = x.walletAddr
              this.walletSelect=x
            }
            return x
          })
          if (this.walletList.length==0) {
            this.type=false
          }
          this.getOldPwd()
        }
    },
    submit() {
      let rule = /^(?=.*[a-z])(?=.*\d)(?=.*[A-Z])[a-zA-Z\d]{8,16}$/i
      if(!this.walletSelect.walletName){
        this.$toast('请选择钱包')
        return
      } else if(!this.oldPwd){
        this.$toast('数据丢失，请重置支付密码')
        return
      } else if(!this.ruleForm.oldPwd){
        this.$toast('请输入原支付密码')
        return
      } else if(!this.ruleForm.newPwd){
        this.$toast('请输入新支付密码')
        return
      } else if(this.ruleForm.newPwd.length<8||this.ruleForm.newPwd.length>16) {
        this.$toast('请输入8-16位字符')
        return
      } else if(!rule.test(this.ruleForm.newPwd)) {
        this.$toast('密码必须包含字母和数字')
        return
      } else if(!this.ruleForm.confirmPwd) {
        this.$toast('请输入确认支付密码')
        return
      } else if(this.ruleForm.newPwd!=this.ruleForm.confirmPwd){
        this.$toast('两次密码输入不一致')
        return
      } else if(this.ruleForm.oldPwd!=this.oldPwd){
        this.$toast('原支付密码输入不正确')
        return
      }
      this.walletBox[this.userId][this.walletSelect.walletAddr].payPwd=Encrypt(this.ruleForm.newPwd)
      localStorage.setItem('wallet',JSON.stringify(this.walletBox))
      this.$toast('操作成功')
      this.getOldPwd()
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    onConfirm(value, index) {
      this.showPicker = false;
      this.walletSelect=value;
      this.ruleForm.oldPwd='';
      this.ruleForm.newPwd='';
      this.ruleForm.confirmPwd='';
      this.getOldPwd()
    },
    getOldPwd(){
      if (this.walletBox&&this.walletBox[this.userId][this.walletSelect.walletAddr]){
        this.oldPwd = Decrypt(this.walletBox[this.userId][this.walletSelect.walletAddr].payPwd)
      }else{
        this.oldPwd = ""
      }
      console.log(this.oldPwd)
    },
    clearPwd(){
      this.i++
      if (this.i>25) {
        this.$toast('清除成功')
        localStorage.removeItem('wallet')
      }
    }
  },
};
</script>
<style scoped>
.mySet {
  width: 100%;
  height: 100vh;
  background: #fff;
}
.samll_box{
  width: 100%;
  height: .96rem;
  padding: .24rem .4rem .24rem .29rem;
  border-bottom: 1px solid #f1f1f1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  box-sizing: border-box;
}
.samll_box img{
  width: .48rem;
  height: .48rem;
}
.samll_box>p{
  width: 4.6rem;
  height: .48rem;
  line-height: .48rem;
  color: #333333;
  font-size: .29rem;
}
.samll_box .jt{
  display: inline-block;
  width: .3rem;
  height: .3rem;
  background: url('../../assets/img/user/right.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  top: .1rem;
}
.xiu{
  height: 1.56rem;
  padding: .38rem .29rem .28rem
}
.xiu>.name{
  width: 100%;
  font-weight: bold;
  font-size: .32rem;
  color: #333333;
}
.xiu .tx{
  margin-top: .14rem;
  color: #F30F0F;
  font-size: .24rem;
  font-weight: normal;
}
.input_box{
  height: .5rem;
  width: 2rem;
  border: none;
  font-size: .35rem;
  text-align:right
}
.footer{
  position: fixed;
  bottom: .5rem;
  background: #fff;
  height: 1rem;
  width: 100%;
  border-top: 1px solid #ddd;
  padding: .2rem .28rem 0;
  font-size: .4rem;
}
.footer span{
  display: inline-block;
  width: 6.94rem;
  height: .82rem;
  background: #00C8E7;
  text-align: center;
  line-height: .82rem;
  color: #fff;
  border-radius: .4rem;
  margin: 0 auto;
}
.noWallet{
  text-align: center;
  font-size: 0.32rem;
  color: #999;
}
.noWallet img{
  width: 100%;
  margin-top: 1.3rem;
}
.selectRow{
  position: relative;
}
.selectRow::before{
  content: '';
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  position: absolute;
  right: 0;
  background: url("../../assets/img/login/icon_xiangxia.png") no-repeat;
  background-size: 100% 100%;
}
</style>
